/**
 * 智慧粮仓 - 粮情检测模块
 * 负责显示和管理粮情温湿度数据
 * 使用warom-utils.js中的通用工具函数
 * 智慧粮仓系统风格交互
 */

// 更新间隔从全局配置中获取
const UPDATE_INTERVAL = getUpdateInterval('GRAIN_SITUATION');

// 保存最近获取的数据
let lastGrainData = {};
let lastTemperatureData = [];
let lastHumidityData = [];
let updateTimer = null;
let currentTab = 0; // 0 = 测温电缆, 1 = 多参数电缆
let isLoading = false; // 加载状态标记
let isFirstLoad = true; // 是否是第一次加载

// 表格配置
const CABLES_PER_ROW = 4; // 每行显示4个电缆
const FIRST_LAYER_CLASS = 'first-layer-data'; // 第一层特殊样式类名

// 全局变量
let historyChart = null;
let currentPanelType = 'temperature'; // 当前激活的面板类型：'temperature' 或 'multiparameter'

/**
 * 初始化页面
 */
function init() {
    console.log("粮情检测页面初始化");
    
    // 加载保存的主题已在HTML中处理
    // 初始化公共头部已在HTML中处理

    // 初始化UI交互
    initUI();

    // 绑定选项卡切换事件
    bindTabEvents();

    // 添加触摸反馈效果
    addTouchFeedback();

    // 绑定刷新按钮事件
    // bindRefreshButton();

    // 第一次加载数据
    loadGrainData();

    // 开始自动更新
    startAutoUpdate();
    
    // 初始化历史数据图表
    initHistoryChart();
}

/**
 * 初始化UI交互
 */
function initUI() {
    // 添加页面进入动画
    document.querySelectorAll('.panel').forEach(panel => {
        panel.style.transform = 'translateY(10px)';
        panel.style.opacity = '0';
    });

    setTimeout(() => {
        const activePanel = document.querySelector('.panel.active');
        if (activePanel) {
            activePanel.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)';
            activePanel.style.transform = 'translateY(0)';
            activePanel.style.opacity = '1';
        }
    }, 100);
}

/**
 * 添加触摸反馈效果
 */
function addTouchFeedback() {
    // 为所有可点击元素添加触摸反馈
    const clickableElements = document.querySelectorAll('.tab-item, button');

    clickableElements.forEach(element => {
        element.addEventListener('touchstart', function () {
            this.style.opacity = '0.7';
        });

        element.addEventListener('touchend', function () {
            this.style.opacity = '1';
        });

        element.addEventListener('touchcancel', function () {
            this.style.opacity = '1';
        });
    });
}

/**
 * 绑定选项卡切换事件
 */
function bindTabEvents() {
    const tabItems = document.querySelectorAll('.tab-item');
    const panels = document.querySelectorAll('.panel');

    tabItems.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            if (currentTab === index) return; // 避免重复点击当前选项卡

            // 移除所有活动状态
            tabItems.forEach(t => t.classList.remove('active'));

            // 设置当前选中状态
            tab.classList.add('active');

            // 准备动画
            const currentPanel = panels[currentTab];
            const targetPanel = panels[index];

            // 设置动画方向
            const direction = index > currentTab ? 1 : -1;

            // 当前面板退出动画
            currentPanel.style.transition = 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';
            currentPanel.style.opacity = '0';
            currentPanel.style.transform = `translateX(${-10 * direction}px)`;

            // 准备目标面板
            targetPanel.style.display = 'flex';
            targetPanel.style.opacity = '0';
            targetPanel.style.transform = `translateX(${10 * direction}px)`;

            // 执行动画
            setTimeout(() => {
                // 隐藏当前面板
                currentPanel.classList.remove('active');
                currentPanel.style.display = 'none';

                // 显示目标面板
                targetPanel.classList.add('active');
                targetPanel.style.transition = 'all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';
                targetPanel.style.opacity = '1';
                targetPanel.style.transform = 'translateX(0)';

                // 更新当前选项卡索引
                currentTab = index;

                // 加载对应数据
                if (index === 0) {
                    loadTemperatureData();
                } else if (index === 1) {
                    loadMultiParameterData();
                } else if (index === 2) {
                    // 加载历史数据并更新图表
                    updateHistoryChart();
                }
            }, 300);
        });
    });
}

/**
 * 从服务端加载所有粮情数据
 */
function loadGrainData() {
    console.log("开始加载粮情数据...");

    if (isLoading) return;
    isLoading = true;

    // 总是优先尝试使用模拟数据
    if (shouldUseMockData()) {
        console.log("使用模拟数据");
        
        try {
            // 根据当前选项卡加载对应数据
            if (currentTab === 0) {
                console.log("加载模拟温度数据");
                const mockTempData = window.generateMockTemperatureData ? window.generateMockTemperatureData() : [];
                console.log("生成的模拟温度数据:", mockTempData);
                displayTemperatureData(mockTempData);
            } else {
                console.log("加载模拟多参数数据");
                const mockTempData = window.generateMockTemperatureData ? window.generateMockTemperatureData() : [];
                const mockHumData = window.generateMockHumidityData ? window.generateMockHumidityData() : [];
                console.log("生成的模拟温度数据:", mockTempData);
                console.log("生成的模拟湿度数据:", mockHumData);
                displayMultiParameterData(mockTempData, mockHumData);
            }

            isLoading = false;
         
        } catch (error) {
            console.error("加载模拟数据失败:", error);
            isLoading = false;
            showToast('数据加载失败', 'error');
        }
        return;
    }

    // 根据当前选项卡决定加载哪种数据
    if (currentTab === 0) {
        loadTemperatureData();
    } else {
        loadMultiParameterData();
    }
}

/**
 * 加载温度数据（测温电缆）
 */
function loadTemperatureData() {
    console.log("加载测温电缆数据...");

    if (shouldUseMockData()) {
        // 使用模拟数据
        const mockData = window.generateMockTemperatureData ? window.generateMockTemperatureData() : [];
        lastTemperatureData = mockData;
        displayTemperatureData(mockData);
        isLoading = false;
        return;
    }

    // 调用Android接口获取数据
    try {
        callAndroidMethodAsync('getTemperatureData', {})
            .then(result => {
                if (result.success) {
                    console.log("加载温度数据成功", result.data);
                    lastTemperatureData = result.data;
                    displayTemperatureData(result.data);
                } else {
                    console.error("温度数据请求失败", result.error);
                    WaromUtils.showMessage("温度数据加载失败", "error");
                }
                isLoading = false;
            })
            .catch(error => {
                console.error("加载温度数据失败", error);
                WaromUtils.showMessage("温度数据加载失败", "error");
                isLoading = false;
            });
    } catch (error) {
        console.error("调用温度数据接口出错", error);
        WaromUtils.showMessage("温度数据加载失败", "error");
        isLoading = false;
    }
}

/**
 * 加载多参数数据（温度和湿度）
 */
function loadMultiParameterData() {
    console.log("加载多参数电缆数据...");

    if (shouldUseMockData()) {
        // 使用模拟数据
        const mockTempData = window.generateMockTemperatureData ? window.generateMockTemperatureData() : [];
        const mockHumData = window.generateMockHumidityData ? window.generateMockHumidityData() : [];
        lastTemperatureData = mockTempData;
        lastHumidityData = mockHumData;
        displayMultiParameterData(mockTempData, mockHumData);
        isLoading = false;
        return;
    }

    // 先加载温度数据
    try {
        callAndroidMethodAsync('getTemperatureData', {})
            .then(tempResult => {
                if (tempResult.success) {
                    // 成功获取温度数据
                    lastTemperatureData = tempResult.data;

                    // 再加载湿度数据
                    return callAndroidMethodAsync('getHumidityData', {});
                } else {
                    console.error("温度数据请求失败", tempResult.error);
                    WaromUtils.showMessage("温度数据加载失败", "error");
                    isLoading = false;
                    return Promise.reject("温度数据请求失败");
                }
            })
            .then(humResult => {
                if (humResult && humResult.success) {
                    // 成功获取湿度数据
                    lastHumidityData = humResult.data;

                    // 温度和湿度数据都获取后，显示多参数数据
                    displayMultiParameterData(lastTemperatureData, lastHumidityData);
                } else if (humResult) {
                    console.error("湿度数据请求失败", humResult.error);
                    WaromUtils.showMessage("湿度数据加载失败", "error");
                }
                isLoading = false;
            })
            .catch(error => {
                console.error("加载多参数数据失败", error);
                WaromUtils.showMessage("数据加载失败", "error");
                isLoading = false;
            });
    } catch (error) {
        console.error("调用多参数数据接口出错", error);
        WaromUtils.showMessage("数据加载失败", "error");
        isLoading = false;
    }
}

/**
 * 显示温度数据（测温电缆）
 * @param {Array} tempData 温度数据数组
 */
function displayTemperatureData(tempData) {
    console.log("显示温度数据开始");
    console.log("接收到的温度数据:", tempData);

    // 检查数据是否存在
    if (!tempData || tempData.length === 0) {
        console.log("没有温度数据");
        return;
    }

    // 按电缆和层数整理数据
    const tempDataByCable = organizeTempDataByCable(tempData);
    console.log("按电缆整理后的数据:", tempDataByCable);

    // 获取电缆数量
    const cableCount = Object.keys(tempDataByCable).length;
    console.log(`电缆总数: ${cableCount}`);

    if (cableCount === 0) {
        console.log("整理后没有电缆数据");
        return;
    }

    // 每行显示4个电缆
    const cablesPerRow = CABLES_PER_ROW;

    // 计算需要多少个表格
    const tableCount = Math.ceil(cableCount / cablesPerRow);
    console.log(`需要创建 ${tableCount} 个表格`);

    // 获取表格容器
    const container = document.getElementById('temperature-tables-container');

    if (!container) {
        console.log("找不到表格容器 temperature-tables-container");
        return;
    }

    console.log("找到表格容器，开始清空并创建表格");

    // 如果不是第一次加载且容器中已有表格，则直接更新内容而不重新创建
    if (!isFirstLoad && container.children.length > 0) {
        updateTemperatureTableContent(container, tempDataByCable, cableCount, cablesPerRow);
    } else {
        // 首次加载或表格不存在，创建新表格
        // 清空容器
        container.innerHTML = '';

        // 创建表格
        for (let tableIndex = 0; tableIndex < tableCount; tableIndex++) {
            const startCable = tableIndex * cablesPerRow + 1;
            const endCable = Math.min((tableIndex + 1) * cablesPerRow, cableCount);

            console.log(`创建表格 ${tableIndex + 1}，电缆范围: ${startCable} - ${endCable}`);

            if (startCable > cableCount) break;

            // 创建表格容器div
            const tableContainer = document.createElement('div');
            tableContainer.className = 'table-container';
            container.appendChild(tableContainer);

            const table = createTemperatureTable(tempDataByCable, startCable, endCable);
            table.className = tableIndex === 0 ? 'one' : 'two';

            // 添加淡入动画
            tableContainer.style.opacity = '0';
            tableContainer.style.transform = 'translateY(10px)';
            tableContainer.appendChild(table);

            // 触发重绘并添加动画
            setTimeout(() => {
                tableContainer.style.transition = 'all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
                tableContainer.style.opacity = '1';
                tableContainer.style.transform = 'translateY(0)';
            }, 50 + tableIndex * 100);  // 级联延迟
        }
    }

    console.log("表格创建完成");

    // 更新仓温显示
    updateStoreTemperature(tempData);
    
    // 设置首次加载标志为false
    isFirstLoad = false;
}

/**
 * 更新已有温度表格的内容
 * @param {HTMLElement} container 表格容器
 * @param {Object} tempDataByCable 按电缆整理的温度数据
 * @param {Number} cableCount 电缆总数
 * @param {Number} cablesPerRow 每行电缆数
 */
function updateTemperatureTableContent(container, tempDataByCable, cableCount, cablesPerRow) {
    const tableContainers = container.querySelectorAll('.table-container');
    
    tableContainers.forEach((tableContainer, tableIndex) => {
        const startCable = tableIndex * cablesPerRow + 1;
        const endCable = Math.min((tableIndex + 1) * cablesPerRow, cableCount);
        
        if (startCable > cableCount) return;
        
        const table = tableContainer.querySelector('table');
        if (!table) return;
        
        const tbody = table.querySelector('tbody');
        if (!tbody) return;
        
        const rows = tbody.querySelectorAll('tr');
        if (!rows.length) return;
        
        // 获取点位数量
        const points = rows.length;
        
        // 更新每个点位的数据
        rows.forEach((row, pointIndex) => {
            const cells = row.querySelectorAll('td');
            
            // 跳过第一个单元格（点位标签）
            for (let i = 1; i < cells.length; i++) {
                const cable = startCable + i - 1;
                
                if (cable > endCable) continue;
                
                const cell = cells[i];
                
                if (tempDataByCable[cable] && tempDataByCable[cable][pointIndex] !== undefined) {
                    const temp = tempDataByCable[cable][pointIndex];
                    cell.textContent = `${temp}℃`;
                    
                    // 重置样式
                    cell.classList.remove('danger', 'warning');
                    
                    // 计算层号
                    const layerNumber = points - pointIndex;
                    
                    // 第一层添加特殊样式
                    if (layerNumber === 1) {
                        cell.className = FIRST_LAYER_CLASS;
                    }
                    
                    // 根据温度设置状态样式
                    if (temp > 35) {
                        cell.classList.add('danger');
                    } else if (temp > 30) {
                        cell.classList.add('warning');
                    }
                } else {
                    cell.textContent = '--';
                    cell.style.color = 'rgba(255, 255, 255, 0.3)';
                }
            }
        });
    });
}

/**
 * 按电缆和层数整理温度数据
 * @param {Array} tempData 温度数据数组
 * @returns {Object} 按电缆和层数整理的数据
 */
function organizeTempDataByCable(tempData) {
    const result = {};
    console.log(tempData);
    tempData.forEach(point => {
        // 解析电缆号和测点号
        const match = point.englishName.match(/Cable(\d+)_Temp(\d+)/);
        if (match) {
            const cableNo = parseInt(match[1]);
            const pointNo = parseInt(match[2]);

            // 初始化电缆数组
            if (!result[cableNo]) {
                result[cableNo] = [];
            }

            // 存储测点值，索引为pointNo-1（因为数组从0开始，点位从1开始）
            result[cableNo][pointNo - 1] = parseFloat(point.value);
        }
    });

    // 确保每个电缆都有完整的点位数据
    Object.keys(result).forEach(cableNo => {
        const cable = result[cableNo];
        // 填充缺失的点位数据
        for (let i = 0; i < 4; i++) {
            if (cable[i] === undefined) {
                cable[i] = null;
            }
        }
    });

    console.log("整理后的温度数据:", result);
    return result;
}

/**
 * 创建温度表格
 * @param {Array} data 温度数据
 * @param {Number} startCable 起始电缆编号
 * @param {Number} endCable 结束电缆编号
 * @returns {HTMLElement} 表格DOM元素
 */
function createTemperatureTable(data, startCable, endCable) {
    // 创建表格容器
    const tableContainer = document.createElement('div');
    tableContainer.className = 'table-container';

    // 创建表格
    const table = document.createElement('table');

    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');

    // 添加空白单元格（左上角）
    const cornerCell = document.createElement('th');
    cornerCell.textContent = '测点\\电缆号';
    headerRow.appendChild(cornerCell);

    // 添加电缆编号表头
    for (let i = startCable; i <= endCable; i++) {
        const th = document.createElement('th');
        th.textContent = `${i}号`;
        headerRow.appendChild(th);
    }

    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 创建表格主体
    const tbody = document.createElement('tbody');

    // 获取所有电缆点位数量（取第一个电缆的点位数）
    const points = data[startCable] ? data[startCable].length : 0;

    // 为每个点位创建一行
    for (let point = 0; point < points; point++) {
        const row = document.createElement('tr');

        // 添加点位标签
        const labelCell = document.createElement('td');
        // 计算层号：从下往上计数
        const layerNumber = points - point;
        labelCell.textContent = `第${layerNumber}层`;

        // 为第一层添加特殊样式
        if (layerNumber === 1) {
            labelCell.className = 'first-layer-label';
        }

        row.appendChild(labelCell);

        // 添加每个电缆的温度数据
        for (let cable = startCable; cable <= endCable; cable++) {
            const td = document.createElement('td');

            if (data[cable] && data[cable][point] !== undefined) {
                const temp = data[cable][point];
                td.textContent = `${temp}℃`;

                // 第一层添加特殊样式
                if (layerNumber === 1) {
                    td.className = FIRST_LAYER_CLASS;
                }

                // 根据温度设置状态样式
                if (temp > 35) {
                    td.classList.add('danger');
                } else if (temp > 30) {
                    td.classList.add('warning');
                }
            } else {
                td.textContent = '--';
                td.style.color = 'rgba(255, 255, 255, 0.3)';
            }

            row.appendChild(td);
        }

        tbody.appendChild(row);
    }

    table.appendChild(tbody);
    tableContainer.appendChild(table);

    return tableContainer;
}

/**
 * 更新仓温显示（仅温度，用于测温电缆）
 * @param {Array} tempData 温度数据数组
 */
function updateStoreTemperature(tempData) {
    // 计算平均温度
    let totalTemp = 0;
    let count = 0;

    tempData.forEach(point => {
        if (point.deviceSubType === 'TEMPERATURE_SENSOR') {
            totalTemp += parseFloat(point.value);
            count++;
        }
    });

    // 计算平均值
    const avgTemp = count > 0 ? totalTemp / count : 0;

    // 找到仓温显示元素
    const tempElement = document.querySelector('#temperature-panel .temp-display');
    if (tempElement) {
        // 只显示温度，不显示湿度
        tempElement.textContent = `仓温: ${avgTemp.toFixed(1)}℃`;
    }
}

/**
 * 计算平均湿度
 * @param {Array} humData 湿度数据数组
 * @returns {number} 平均湿度
 */
function calculateAverageHumidity(humData) {
    if (!humData || humData.length === 0) return 0;

    let totalHum = 0;
    let count = 0;

    humData.forEach(point => {
        if (point.deviceSubType === 'HUMIDITY_SENSOR') {
            totalHum += parseFloat(point.value);
            count++;
        }
    });

    return count > 0 ? totalHum / count : 0;
}

/**
 * 显示多参数数据（温度和湿度）
 * @param {Array} tempData 温度数据数组
 * @param {Array} humData 湿度数据数组
 */
function displayMultiParameterData(tempData, humData) {
    console.log("显示多参数数据");
    console.log("温度数据:",tempData);
    console.log("湿度数据:",humData);

    // 检查数据是否存在
    if ((!tempData || tempData.length === 0) && (!humData || humData.length === 0)) {
        console.log("没有多参数数据");
        return;
    }

    // 按电缆和层数整理温度数据
    const tempDataByCable = organizeTempDataByCable(tempData);

    // 按电缆和层数整理湿度数据
    const humDataByCable = organizeHumDataByCable(humData);

    // 获取电缆数量（使用温度数据和湿度数据中的最大电缆号）
    const tempCables = Object.keys(tempDataByCable).map(Number);
    const humCables = Object.keys(humDataByCable).map(Number);
    const allCables = [...new Set([...tempCables, ...humCables])];
    const cableCount = allCables.length > 0 ? Math.max(...allCables) : 0;

    console.log(`多参数电缆总数: ${cableCount}`);

    // 由于多参数每个电缆占用两列（温度和湿度），每行显示4个电缆
    const cablesPerRow = 4;

    // 计算需要多少个表格
    const tableCount = Math.ceil(cableCount / cablesPerRow);

    // 获取表格容器
    const container = document.getElementById('multiparameter-tables-container');

    if (!container) {
        console.log("找不到多参数表格容器");
        return;
    }

    // 如果不是第一次加载且容器中已有表格，则直接更新内容而不重新创建
    if (!isFirstLoad && container.children.length > 0) {
        updateMultiParameterTableContent(container, tempDataByCable, humDataByCable, cableCount, cablesPerRow);
    } else {
        // 清空容器
        container.innerHTML = '';

        // 创建表格
        for (let tableIndex = 0; tableIndex < tableCount; tableIndex++) {
            const startCable = tableIndex * cablesPerRow + 1;
            const endCable = Math.min((tableIndex + 1) * cablesPerRow, cableCount);

            if (startCable > cableCount) break;

            // 创建表格容器div
            const tableContainer = document.createElement('div');
            tableContainer.className = 'table-container';
            container.appendChild(tableContainer);

            const table = createMultiParameterTable(tempDataByCable, humDataByCable, startCable, endCable);

            // 设置类名
            if (tableIndex === 0) {
                table.className = 'three';
            } else if (tableIndex === 1) {
                table.className = 'three t_h';
            } else {
                table.className = 'four';
            }

            // 添加淡入动画
            tableContainer.style.opacity = '0';
            tableContainer.style.transform = 'translateY(10px)';
            tableContainer.appendChild(table);

            // 触发重绘并添加动画
            setTimeout(() => {
                tableContainer.style.transition = 'all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
                tableContainer.style.opacity = '1';
                tableContainer.style.transform = 'translateY(0)';
            }, 50 + tableIndex * 100);  // 级联延迟
        }
    }

    // 更新仓温仓湿显示
    updateStoreEnvironment(tempData, humData);
    
    // 设置首次加载标志为false
    isFirstLoad = false;
}

/**
 * 更新已有多参数表格的内容
 * @param {HTMLElement} container 表格容器
 * @param {Object} tempDataByCable 按电缆整理的温度数据
 * @param {Object} humDataByCable 按电缆整理的湿度数据
 * @param {Number} cableCount 电缆总数
 * @param {Number} cablesPerRow 每行电缆数
 */
function updateMultiParameterTableContent(container, tempDataByCable, humDataByCable, cableCount, cablesPerRow) {
    const tableContainers = container.querySelectorAll('.table-container');
    
    tableContainers.forEach((tableContainer, tableIndex) => {
        const startCable = tableIndex * cablesPerRow + 1;
        const endCable = Math.min((tableIndex + 1) * cablesPerRow, cableCount);
        
        if (startCable > cableCount) return;
        
        const table = tableContainer.querySelector('table');
        if (!table) return;
        
        const tbody = table.querySelector('tbody');
        if (!tbody) return;
        
        const rows = tbody.querySelectorAll('tr');
        if (!rows.length) return;
        
        // 获取点位数量（每个点位有两行：温度和湿度）
        const points = rows.length / 2;
        
        // 更新每个点位的数据
        for (let pointIndex = 0; pointIndex < points; pointIndex++) {
            // 温度行和湿度行
            const tempRow = rows[pointIndex * 2];
            const humRow = rows[pointIndex * 2 + 1];
            
            if (!tempRow || !humRow) continue;
            
            const tempCells = tempRow.querySelectorAll('td');
            const humCells = humRow.querySelectorAll('td');
            
            // 计算层号
            const layerNumber = points - pointIndex;
            
            // 跳过第一个单元格（点位标签）
            for (let i = 1; i < tempCells.length; i++) {
                const cable = startCable + i - 1;
                
                if (cable > endCable) continue;
                
                // 更新温度单元格
                const tempCell = tempCells[i];
                if (tempDataByCable[cable] && tempDataByCable[cable][pointIndex] !== undefined) {
                    const temp = tempDataByCable[cable][pointIndex];
                    tempCell.textContent = `${temp}℃`;
                    
                    // 重置样式
                    tempCell.classList.remove('danger', 'warning');
                    
                    // 第一层添加特殊样式
                    if (layerNumber === 1) {
                        tempCell.className = FIRST_LAYER_CLASS;
                    }
                    
                    // 根据温度设置状态样式
                    if (temp > 35) {
                        tempCell.classList.add('danger');
                    } else if (temp > 30) {
                        tempCell.classList.add('warning');
                    }
                } else {
                    tempCell.textContent = '--';
                    tempCell.style.color = 'rgba(255, 255, 255, 0.3)';
                }
                
                // 更新湿度单元格
                const humCell = humCells[i];
                if (humDataByCable[cable] && humDataByCable[cable][pointIndex] !== undefined) {
                    const hum = humDataByCable[cable][pointIndex];
                    humCell.textContent = `${hum}RH`;
                    
                    // 重置样式
                    humCell.classList.remove('danger', 'warning');
                    
                    // 第一层添加特殊样式
                    if (layerNumber === 1) {
                        humCell.className = FIRST_LAYER_CLASS;
                    }
                    
                    // 根据湿度设置状态样式
                    if (hum > 75) {
                        humCell.classList.add('danger');
                    } else if (hum > 65) {
                        humCell.classList.add('warning');
                    }
                } else {
                    humCell.textContent = '--';
                    humCell.style.color = 'rgba(255, 255, 255, 0.3)';
                }
            }
        }
    });
}

/**
 * 按电缆和层数整理湿度数据
 * @param {Array} humData 湿度数据数组
 * @returns {Object} 按电缆和层数整理的数据
 */
function organizeHumDataByCable(humData) {
    const result = {};

    humData.forEach(point => {
        // 解析电缆号和测点号
        const match = point.englishName.match(/Cable(\d+)_Humidity(\d+)/);
        if (match) {
            const cableNo = parseInt(match[1]);
            const pointNo = parseInt(match[2]);

            // 初始化电缆数组
            if (!result[cableNo]) {
                result[cableNo] = [];
            }

            // 存储测点值，索引为pointNo-1（因为数组从0开始，点位从1开始）
            result[cableNo][pointNo - 1] = parseFloat(point.value);
        }
    });

    // 确保每个电缆都有完整的点位数据
    Object.keys(result).forEach(cableNo => {
        const cable = result[cableNo];
        // 填充缺失的点位数据
        for (let i = 0; i < 4; i++) {
            if (cable[i] === undefined) {
                cable[i] = null;
            }
        }
    });

    console.log("整理后的湿度数据:", result);
    return result;
}

/**
 * 创建多参数表格（温度+湿度）
 * @param {Object} tempData 温度数据
 * @param {Object} humData 湿度数据
 * @param {Number} startCable 起始电缆编号
 * @param {Number} endCable 结束电缆编号
 * @returns {HTMLElement} 表格DOM元素
 */
function createMultiParameterTable(tempData, humData, startCable, endCable) {
    // 创建表格容器
    const tableContainer = document.createElement('div');
    tableContainer.className = 'table-container';

    // 创建表格
    const table = document.createElement('table');

    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');

    // 添加空白单元格（左上角）
    const cornerCell = document.createElement('th');
    cornerCell.textContent = '测点\\电缆号';
    headerRow.appendChild(cornerCell);

    // 添加电缆编号表头
    for (let i = startCable; i <= endCable; i++) {
        const th = document.createElement('th');
        th.textContent = `${i}号`;
        headerRow.appendChild(th);
    }

    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 创建表格主体
    const tbody = document.createElement('tbody');

    // 获取所有电缆点位数量（取第一个电缆的点位数）
    const points = tempData[startCable] ? tempData[startCable].length : 0;

    // 为每个点位创建温度行和湿度行
    for (let point = 0; point < points; point++) {
        // 计算层号：从下往上计数
        const layerNumber = points - point;

        // 温度行
        const tempRow = document.createElement('tr');

        // 添加点位标签
        const tempLabelCell = document.createElement('td');
        tempLabelCell.textContent = `第${layerNumber}层 温`;

        // 为第一层添加特殊样式
        if (layerNumber === 1) {
            tempLabelCell.className = 'first-layer-label';
        }

        tempRow.appendChild(tempLabelCell);

        // 添加每个电缆的温度数据
        for (let cable = startCable; cable <= endCable; cable++) {
            const td = document.createElement('td');

            if (tempData[cable] && tempData[cable][point] !== undefined) {
                const temp = tempData[cable][point];
                td.textContent = `${temp}℃`;

                // 第一层添加特殊样式
                if (layerNumber === 1) {
                    td.className = FIRST_LAYER_CLASS;
                }

                // 根据温度设置状态样式
                if (temp > 35) {
                    td.classList.add('danger');
                } else if (temp > 30) {
                    td.classList.add('warning');
                }
            } else {
                td.textContent = '--';
                td.style.color = 'rgba(255, 255, 255, 0.3)';
            }

            tempRow.appendChild(td);
        }

        tbody.appendChild(tempRow);

        // 湿度行
        const humRow = document.createElement('tr');

        // 添加点位标签
        const humLabelCell = document.createElement('td');
        humLabelCell.textContent = `第${layerNumber}层 湿`;

        // 为第一层添加特殊样式
        if (layerNumber === 1) {
            humLabelCell.className = 'first-layer-label';
        }

        humRow.appendChild(humLabelCell);

        // 添加每个电缆的湿度数据
        for (let cable = startCable; cable <= endCable; cable++) {
            const td = document.createElement('td');

            if (humData[cable] && humData[cable][point] !== undefined) {
                const hum = humData[cable][point];
                td.textContent = `${hum}RH`;

                // 第一层添加特殊样式
                if (layerNumber === 1) {
                    td.className = FIRST_LAYER_CLASS;
                }

                // 根据湿度设置状态样式
                if (hum > 75) {
                    td.classList.add('danger');
                } else if (hum > 65) {
                    td.classList.add('warning');
                }
            } else {
                td.textContent = '--';
                td.style.color = 'rgba(255, 255, 255, 0.3)';
            }

            humRow.appendChild(td);
        }

        tbody.appendChild(humRow);
    }

    table.appendChild(tbody);
    tableContainer.appendChild(table);

    return tableContainer;
}

/**
 * 更新仓温仓湿显示（用于多参数电缆）
 * @param {Array} tempData 温度数据数组
 * @param {Array} humData 湿度数据数组
 */
function updateStoreEnvironment(tempData, humData) {
    // 计算平均温度
    let totalTemp = 0;
    let tempCount = 0;

    tempData.forEach(point => {
        if (point.deviceSubType === 'TEMPERATURE_SENSOR') {
            totalTemp += parseFloat(point.value);
            tempCount++;
        }
    });

    // 计算平均湿度
    let totalHum = 0;
    let humCount = 0;

    humData.forEach(point => {
        if (point.deviceSubType === 'HUMIDITY_SENSOR') {
            totalHum += parseFloat(point.value);
            humCount++;
        }
    });

    // 计算平均值
    const avgTemp = tempCount > 0 ? totalTemp / tempCount : 0;
    const avgHum = humCount > 0 ? totalHum / humCount : 0;

    // 找到仓温仓湿显示元素
    const tempElement = document.querySelector('#multiparameter-panel .temp-display');
    if (tempElement) {
        tempElement.textContent = `仓温: ${avgTemp.toFixed(1)}℃ 仓湿: ${avgHum.toFixed(1)}RH`;
    }
}

/**
 * 开始自动更新数据
 */
function startAutoUpdate() {
    if (updateTimer) {
        clearInterval(updateTimer);
    }

    updateTimer = setInterval(() => {
        console.log(`自动更新，当前标签页: ${currentTab}`);
        if (currentTab === 0 || currentTab === 1) {
            loadGrainData();
        } else if (currentTab === 2) {
            updateHistoryChart();
        }
    }, UPDATE_INTERVAL);
}

// 使用common.js中的时间格式化功能，不再需要单独的updateCurrentTime函数

/**
 * 初始化历史数据图表
 */
function initHistoryChart() {
    // 初始化ECharts实例
    historyChart = echarts.init(document.getElementById('history-chart'), 'dark');
    
    // 设置初始空图表
    const option = {
        backgroundColor: 'transparent',
        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#e0e0e0',
                textShadowColor: 'rgba(60, 120, 230, 0.5)',
                textShadowBlur: 5,
            }
        },
        tooltip: {
            trigger: 'axis',
            appendToBody: true,
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            backgroundColor: 'rgba(30, 45, 75, 0.9)',
            borderColor: 'rgba(60, 120, 230, 0.5)',
            borderWidth: 1,
            textStyle: {
                color: '#fff'
            },
            formatter: function (params) {
                if (!params || params.length === 0) {
                    return '';
                }

                const title = params[0].axisValueLabel;
                const unit = currentPanelType === 'temperature' ? '℃' : '%';

                const items = params.map(param => {
                    if (param.value === undefined || param.value === null) return '';
                    return `${param.marker}${param.seriesName}: <strong>${param.value.toFixed(1)}</strong> ${unit}`;
                }).filter(item => item !== '');

                if (items.length === 0) {
                    return '';
                }

                // 根据电缆数量决定列数，优化展示
                const numColumns = items.length > 16 ? 3 : (items.length > 8 ? 2 : 1);
                const itemsPerColumn = Math.ceil(items.length / numColumns);
                
                let columnsHtml = '<div style="display: flex; gap: 20px;">';
                for (let i = 0; i < numColumns; i++) {
                    const columnItems = items.slice(i * itemsPerColumn, (i + 1) * itemsPerColumn);
                    if (columnItems.length > 0) {
                        columnsHtml += `<div>${columnItems.join('<br/>')}</div>`;
                    }
                }
                columnsHtml += '</div>';

                return `<div style="font-size: 12px;">${title}<br/>${columnsHtml}</div>`;
            }
        },
        legend: {
            data: [],
            top: 30,
            textStyle: {
                color: '#a0b3d8'
            },
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '35%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: [],
            axisLine: { 
                show: true, 
                lineStyle: { 
                    color: 'rgba(60, 120, 230, 0.4)' 
                } 
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.7)',
            },
            splitLine: { 
                show: true, 
                lineStyle: { 
                    color: 'rgba(60, 120, 230, 0.1)', 
                    type: 'dashed' 
                } 
            },
        },
        yAxis: [
            {
                type: 'value',
                name: '温度 (℃)',
                position: 'left',
                axisLine: { show: false },
                splitLine: { 
                    show: true, 
                    lineStyle: { 
                        color: 'rgba(60, 120, 230, 0.1)', 
                        type: 'dashed' 
                    } 
                },
                axisLabel: { color: 'rgba(255, 255, 255, 0.7)' },
                show: currentPanelType === 'temperature'
            },
            {
                type: 'value',
                name: '湿度 (%)',
                position: 'left',
                axisLine: { show: false },
                splitLine: { show: false },
                axisLabel: { color: 'rgba(255, 255, 255, 0.7)' },
                show: currentPanelType === 'humidity'
            }
        ],
        series: []
    };
    
    // 应用初始配置
    historyChart.setOption(option);
    
    // 监听窗口大小变化，调整图表大小
    window.addEventListener('resize', () => {
        if (historyChart) {
            historyChart.resize();
        }
    });
    
    // 绑定图表类型和时间选择器事件
    bindChartTypeSelector();
}

/**
 * 动态填充电缆选择器
 * @param {Array} cables 电缆列表
 */
function populateCableSelector(cables) {
    const container = document.getElementById('cable-selector-container');
    if (!container) return;

    // 分离出全选按钮，因为它不应该被重复渲染
    const selectAllLabel = container.querySelector('.select-all-label');
    let hasBoundSelectAll = false; // 标记是否已绑定全选事件

    if (selectAllLabel && !hasBoundSelectAll) {
        const selectAllCheckbox = selectAllLabel.querySelector('#select-all-cables');
        selectAllCheckbox.addEventListener('change', () => {
            console.log("全选按钮状态变更:", selectAllCheckbox.checked);
            const allCableCheckboxes = container.querySelectorAll('input[type="checkbox"]:not(#select-all-cables)');
            
            // 批量更新复选框状态
            allCableCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
            
            // 仅在不处于跳过更新状态时触发图表更新
            if (!window._skipHistoryChartUpdate) {
                console.log("全选按钮触发图表更新");
                updateHistoryChart();
            }
        });
        hasBoundSelectAll = true; // 标记已绑定
    }
    
    // 获取当前已有的checkbox，以避免重绘
    const existingCheckboxes = container.querySelectorAll('.cable-checkbox-label:not(.select-all-label)');
    if (existingCheckboxes.length === cables.length) {
        return; // 如果数量匹配，则不重新生成
    }

    // 清空旧的电缆（保留全选）
    existingCheckboxes.forEach(cb => cb.remove());

    // 判断是否是首次加载
    const isFirstLoad = !window._hasLoadedCableSelector;
    
    // 标记已经加载过
    window._hasLoadedCableSelector = true;

    cables.forEach((cable, index) => {
        const label = document.createElement('label');
        label.className = 'cable-checkbox-label';
        
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.value = cable.name;
        
        // 首次加载时，只选中前2根电缆线
        input.checked = isFirstLoad ? (index < 2) : true;
        
        input.addEventListener('change', () => {
            // 当单个复选框状态改变时，更新"全选"复选框的状态
            const allCableCheckboxes = container.querySelectorAll('.cable-checkbox-label:not(.select-all-label) input[type="checkbox"]');
            const allChecked = Array.from(allCableCheckboxes).every(cb => cb.checked);
            container.querySelector('#select-all-cables').checked = allChecked;
            
            // 仅在不处于跳过更新状态时触发图表更新
            if (!window._skipHistoryChartUpdate) {
                console.log("电缆复选框状态变更触发图表更新");
                updateHistoryChart();
            }
        });

        const customCheckbox = document.createElement('span');
        customCheckbox.className = 'checkbox-custom';

        label.appendChild(input);
        label.appendChild(customCheckbox);
        label.appendChild(document.createTextNode(cable.name));
        
        container.appendChild(label);
    });
    
    // 首次加载时，更新全选按钮状态为未选中
    if (isFirstLoad) {
        const selectAllCheckbox = container.querySelector('#select-all-cables');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = false;
        }
    }
}

/**
 * 绑定图表类型和时间选择器事件
 */
function bindChartTypeSelector() {
    // 绑定图表类型切换（温度/湿度）
    const typeOptions = document.querySelectorAll('.chart-type-option');
    typeOptions.forEach(option => {
        option.addEventListener('click', () => {
            typeOptions.forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');
            updateHistoryChart();
        });
    });
    
    // 绑定时间范围下拉列表切换
    const timeRangeSelect = document.getElementById('time-range-select');
    if (timeRangeSelect) {
        timeRangeSelect.addEventListener('change', () => {
            updateHistoryChart();
        });
    }
}

/**
 * 更新历史数据图表
 */
function updateHistoryChart() {
    try {
        // 防止重入，避免无限循环
        if (window._isUpdatingHistoryChart) {
            console.warn("updateHistoryChart 正在执行中，避免重复调用");
            return;
        }
        
        window._isUpdatingHistoryChart = true;
        console.log("开始更新历史数据图表...");
        
        // 获取当前选中的图表类型
        const activeOption = document.querySelector('.chart-type-option.active');
        const chartType = activeOption ? activeOption.getAttribute('data-type') : 'temperature';
        
        // 获取当前选中的时间范围
        const timeRangeSelect = document.getElementById('time-range-select');
        const durationMinutes = timeRangeSelect ? parseInt(timeRangeSelect.value, 10) : 1440;
        
        // 获取选中的电缆
        const selectedCables = Array.from(document.querySelectorAll('#cable-selector-container input:checked:not(#select-all-cables)'))
                                     .map(input => input.value);
        
        console.log(`已选择 ${selectedCables.length} 个电缆，图表类型: ${chartType}, 时间范围: ${durationMinutes}分钟`);

        // 数据处理和渲染的通用函数
        const processAndRender = (historyData, chartType, selectedCables) => {
            try {
                console.log(`处理历史数据: ${historyData.cables.length} 个电缆, ${historyData.timePoints.length} 个时间点`);
                
                // 判断是否是首次加载
                const isFirstLoad = !window._hasRenderedHistoryChart;
                window._hasRenderedHistoryChart = true;
                
                // 首次填充选择器，但避免触发更新
                window._skipHistoryChartUpdate = true;
                populateCableSelector(historyData.cables);
                window._skipHistoryChartUpdate = false;
                
                // 首次加载时，只选择前两根电缆
                let cablesToRender = selectedCables;
                if (isFirstLoad && historyData.cables && historyData.cables.length > 0) {
                    // 如果是首次加载，只显示前两根电缆
                    cablesToRender = historyData.cables.slice(0, 2).map(cable => cable.name);
                }
                
                // 然后根据选择渲染图表
                renderHistoryChart(historyData, chartType, cablesToRender);
            } catch (error) {
                console.error("处理和渲染历史数据时出错:", error);
                WaromUtils.showMessage("图表渲染失败", "error");
            }
        };

        if (shouldUseMockData()) {
            // 使用模拟数据
            console.log("使用模拟数据模式，调用 MockGrainData.getCableHistoryData");
            const response = MockGrainData.getCableHistoryData(); 
            if (response.success) {
                processAndRender(response.data, chartType, selectedCables);
            } else {
                console.error('获取模拟历史数据失败');
                WaromUtils.showMessage("历史数据加载失败", "error");
            }
        } else {
            // 调用Android接口获取数据
            const selectedCableNumbers = selectedCables.map(name => parseInt(name.replace('电缆', ''))).filter(n => !isNaN(n));
            const args = {
                cableNos: selectedCableNumbers,
                durationMinutes: durationMinutes 
            }
            callAndroidMethodAsync('getHistoryGrainSituationData', JSON.stringify(args))
            .then(response => {
                if (response.success) {
                   const data = response.data;
                   // Check if data from the backend is valid. If not, render an empty chart.
                   if (data && Array.isArray(data.cables) && data.cables.length > 0 && Array.isArray(data.timePoints) && data.timePoints.length > 0) {
                       processAndRender(data, chartType, selectedCables);
                   } else {
                       // Real data is empty, so render the empty chart state.
                       console.log("从后端接收到空历史数据，渲染空图表。");
                       processAndRender({ cables: [], timePoints: [] }, chartType, selectedCables);
                   }
                } else {
                    console.error('获取历史数据失败:', response.error);
                    WaromUtils.showMessage("历史数据加载失败", "error");
                }
            })
            .catch(error => {
                console.error('调用 getHistoryGrainSituationData 出错:', error);
                WaromUtils.showMessage("历史数据加载失败", "error");
            });
        }

    } catch (error) {
        console.error('更新历史数据图表出错:', error);
        WaromUtils.showMessage("历史数据加载失败", "error");
    } finally {
        // 确保标志被重置
        window._isUpdatingHistoryChart = false;
    }
}

/**
 * 切换历史图表空状态提示
 * @param {boolean} show 是否显示
 * @param {string} [message] 要显示的消息
 */
function toggleEmptyChartMessage(show, message = '当前选择的时间范围无历史数据') {
    if (!historyChart) return;
    const chartContainer = historyChart.getDom().parentNode;
    if (!chartContainer) return;

    // 查找现有的空状态元素
    let emptyMessageEl = chartContainer.querySelector('.empty-state');
    
    // 找到所有canvas元素
    const canvasElements = chartContainer.querySelectorAll('canvas');
    
    // 找到电缆选择相关元素
    const cableSelector = document.getElementById('cable-selector-container');
    const cableSelectionBar = document.getElementById('cable-selection-bar');
    
    // 找到图表标题元素
    const chartTitle = document.getElementById('chart-title');

    if (show) {
        // 隐藏所有canvas元素
        canvasElements.forEach(canvas => {
            canvas.style.display = 'none';
        });
        
        // 隐藏电缆选择器和选择栏
        if (cableSelector) {
            cableSelector.style.display = 'none';
        }
        if (cableSelectionBar) {
            cableSelectionBar.style.display = 'none';
        }
        
        // 隐藏图表标题
        if (chartTitle) {
            chartTitle.style.display = 'none';
        }
        
        // 清空图表内容，但保留坐标轴等基本结构
        historyChart.setOption({
            series: []
        }, false);
        
        // 如果没有空状态元素，使用通用组件创建一个
        if (!emptyMessageEl) {
            // 使用通用的空状态组件，设置为大尺寸
            window.showEmptyState({
                container: chartContainer,
                message: message,
                icon: 'layui-icon-about',
                iconColor: '#fac858',
                size: 'large' // 使用大尺寸
            });
        }
    } else {
        // 如果存在空状态元素，则移除它
        if (emptyMessageEl) {
            window.hideEmptyState(emptyMessageEl);
        }
        
        // 显示所有canvas元素
        canvasElements.forEach(canvas => {
            canvas.style.display = 'block';
        });
        
        // 显示电缆选择器和选择栏
        if (cableSelector) {
            cableSelector.style.display = 'flex';
        }
        if (cableSelectionBar) {
            cableSelectionBar.style.display = 'flex';
        }
        
        // 显示图表标题
        if (chartTitle) {
            chartTitle.style.display = 'block';
        }
    }
}

/**
 * 渲染历史数据图表
 * @param {Object} historyData 历史数据
 * @param {String} chartType 图表类型：'temperature' 或 'humidity'
 * @param {Array} selectedCables 选中的电缆名称列表
 */
function renderHistoryChart(historyData, chartType, selectedCables) {
    if (!historyChart) return;
    
    console.log(`开始渲染历史图表，选中的电缆数量: ${selectedCables.length}`);
    
    // 找到电缆选择相关元素
    const cableSelector = document.getElementById('cable-selector-container');
    const cableSelectionBar = document.getElementById('cable-selection-bar');
    
    // 找到图表标题元素
    const chartTitle = document.getElementById('chart-title');
    
    // 如果数据为空，则显示空状态提示并返回
    if (!historyData || !historyData.cables || historyData.cables.length === 0 || !historyData.timePoints || historyData.timePoints.length === 0) {
        toggleEmptyChartMessage(true, "当前选择的时间范围无历史数据");
        
        // 清空电缆选择器
        if (cableSelector) {
            populateCableSelector([]);
            cableSelector.style.display = 'none'; // 确保电缆选择器被隐藏
        }
        
        // 隐藏电缆选择栏
        if (cableSelectionBar) {
            cableSelectionBar.style.display = 'none';
        }
        
        // 隐藏图表标题
        if (chartTitle) {
            chartTitle.style.display = 'none';
        }
        
        return;
    }

    // 如果有数据，确保空状态消息是隐藏的
    toggleEmptyChartMessage(false);
    
    // 确保所有canvas元素可见
    const chartContainer = historyChart.getDom().parentNode;
    if (chartContainer) {
        const canvasElements = chartContainer.querySelectorAll('canvas');
        canvasElements.forEach(canvas => {
            canvas.style.display = 'block';
        });
    }
    
    // 确保电缆选择器和选择栏可见
    if (cableSelector) {
        cableSelector.style.display = 'flex';
    }
    if (cableSelectionBar) {
        cableSelectionBar.style.display = 'flex';
    }
    
    // 确保图表标题不可见（按照要求去掉）
    if (chartTitle) {
        chartTitle.style.display = 'none';
    }

    // 过滤出选中的电缆数据
    const filteredCables = historyData.cables.filter(cable => selectedCables.includes(cable.name));
    console.log(`过滤后的电缆数量: ${filteredCables.length}`);

    // 如果选中的电缆数量过多，可能导致性能问题，显示警告
    const MAX_SAFE_CABLES = 15;
    if (filteredCables.length > MAX_SAFE_CABLES) {
        console.warn(`选中的电缆数量(${filteredCables.length})较多，可能影响性能`);
    }

    // 准备图表配置
    const option = {
        backgroundColor: 'transparent',
        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#e0e0e0',
                textShadowColor: 'rgba(60, 120, 230, 0.5)',
                textShadowBlur: 5,
            }
        },
        tooltip: {
            trigger: 'axis',
            appendToBody: true,
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            backgroundColor: 'rgba(30, 45, 75, 0.9)',
            borderColor: 'rgba(60, 120, 230, 0.5)',
            borderWidth: 1,
            textStyle: {
                color: '#fff'
            },
            formatter: function (params) {
                if (!params || params.length === 0) {
                    return '';
                }

                const title = params[0].axisValueLabel;
                const unit = chartType === 'temperature' ? '℃' : '%';

                const items = params.map(param => {
                    if (param.value === undefined || param.value === null) return '';
                    return `${param.marker}${param.seriesName}: <strong>${param.value.toFixed(1)}</strong> ${unit}`;
                }).filter(item => item !== '');

                if (items.length === 0) {
                    return '';
                }

                // 根据电缆数量决定列数，优化展示
                const numColumns = items.length > 16 ? 3 : (items.length > 8 ? 2 : 1);
                const itemsPerColumn = Math.ceil(items.length / numColumns);
                
                let columnsHtml = '<div style="display: flex; gap: 20px;">';
                for (let i = 0; i < numColumns; i++) {
                    const columnItems = items.slice(i * itemsPerColumn, (i + 1) * itemsPerColumn);
                    if (columnItems.length > 0) {
                        columnsHtml += `<div>${columnItems.join('<br/>')}</div>`;
                    }
                }
                columnsHtml += '</div>';

                return `<div style="font-size: 12px;">${title}<br/>${columnsHtml}</div>`;
            }
        },
        legend: {
            data: [],
            top: 30,
            textStyle: {
                color: '#a0b3d8'
            },
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            // 当电缆数量过多时，启用滚动
            type: filteredCables.length > 10 ? 'scroll' : 'plain',
            // 当电缆数量过多时，减小图例高度
            height: filteredCables.length > 10 ? '15%' : 'auto'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 当电缆数量过多时，增加顶部边距给图例留出空间
            top: filteredCables.length > 10 ? '40%' : '35%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: historyData.timePoints,
            axisLine: { 
                show: true, 
                lineStyle: { 
                    color: 'rgba(60, 120, 230, 0.4)' 
                } 
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.7)',
            },
            splitLine: { 
                show: true, 
                lineStyle: { 
                    color: 'rgba(60, 120, 230, 0.1)', 
                    type: 'dashed' 
                } 
            },
        },
        yAxis: [
            {
                type: 'value',
                name: '温度 (℃)',
                position: 'left',
                axisLine: { show: false },
                splitLine: { 
                    show: true, 
                    lineStyle: { 
                        color: 'rgba(60, 120, 230, 0.1)', 
                        type: 'dashed' 
                    } 
                },
                axisLabel: { color: 'rgba(255, 255, 255, 0.7)' },
                show: chartType === 'temperature'
            },
            {
                type: 'value',
                name: '湿度 (%)',
                position: 'left',
                axisLine: { show: false },
                splitLine: { show: false },
                axisLabel: { color: 'rgba(255, 255, 255, 0.7)' },
                show: chartType === 'humidity'
            }
        ],
        series: [],
        // 添加渐进式渲染，提高大数据量下的性能
        progressive: 200,
        progressiveThreshold: 500
    };
    
    // 数据系列通用配置
    const seriesOptions = {
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        // 当电缆数量过多时，减少采样点以提高性能
        sampling: filteredCables.length > 10 ? 'average' : 'none',
        lineStyle: {
            width: 2,
            shadowBlur: 8,
            shadowOffsetY: 2
        },
        emphasis: {
            focus: 'series',
            scale: 1.2
        },
    };

    // 使用 setTimeout 延迟渲染，避免阻塞UI
    setTimeout(() => {
        try {
            console.log("开始渲染数据系列...");
            
            if (chartType === 'temperature') {
                filteredCables.forEach((cable, index) => {
                    const colorIndex = historyData.cables.findIndex(c => c.name === cable.name);
                    option.legend.data.push(cable.name);
                    option.series.push({
                        ...seriesOptions,
                        name: cable.name,
                        data: cable.temperature,
                        itemStyle: {
                            color: getSeriesColor(colorIndex)
                        },
                        lineStyle: {
                            ...seriesOptions.lineStyle,
                            color: getSeriesColor(colorIndex),
                            shadowColor: getSeriesColor(colorIndex),
                        }
                    });
                });
            } else if (chartType === 'humidity') {
                filteredCables.forEach((cable, index) => {
                    if (cable.hasHumidity) {
                        const colorIndex = historyData.cables.findIndex(c => c.name === cable.name);
                        option.legend.data.push(cable.name);
                        option.series.push({
                            ...seriesOptions,
                            name: cable.name,
                            data: cable.humidity,
                            yAxisIndex: 1,
                            itemStyle: {
                                color: getSeriesColor(colorIndex)
                            },
                            lineStyle: {
                                ...seriesOptions.lineStyle,
                                color: getSeriesColor(colorIndex),
                                shadowColor: getSeriesColor(colorIndex),
                            }
                        });
                    }
                });
            }
            
            console.log(`准备设置图表选项，系列数量: ${option.series.length}`);
            
            // 设置图表配置
            historyChart.setOption(option, true);
            
            // 调整图表大小
            historyChart.resize();
            
            console.log("图表渲染完成");
        } catch (error) {
            console.error("渲染图表时出错:", error);
            WaromUtils.showMessage("图表渲染失败", "error");
        }
    }, 0);

    // 更新全选按钮的初始状态
    const container = document.getElementById('cable-selector-container');
    if(container) {
        const allCableCheckboxes = container.querySelectorAll('.cable-checkbox-label:not(.select-all-label) input[type="checkbox"]');
        const allChecked = Array.from(allCableCheckboxes).every(cb => cb.checked);
        const selectAllCheckbox = container.querySelector('#select-all-cables');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = allChecked;
        }
    }
}

/**
 * 获取数据系列颜色
 * @param {Number} index 系列索引
 * @param {Number} alpha 透明度，默认为1
 * @returns {String} 颜色值
 */
function getSeriesColor(index, alpha = 1) {
    const colors = [
        '#5470c6', '#91cc75', '#fac858', '#ee6666',
        '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
        '#ea7ccc', '#4ec9b0', '#7eb0d5', '#bd6d6c'
    ];
    
    const color = colors[index % colors.length];
    
    // 如果透明度不是1，则转换为rgba格式
    if (alpha !== 1) {
        // 将十六进制颜色转换为RGB
        const r = parseInt(color.slice(1, 3), 16);
        const g = parseInt(color.slice(3, 5), 16);
        const b = parseInt(color.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    
    return color;
}

// 当文档加载完成后初始化
document.addEventListener('DOMContentLoaded', init); 